/** @format */

// store/index.ts
import { defineStore } from "pinia";
import router from "../router";
import { exportRoutes } from "./commin.js";
// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例

// console.log(router,"router");

export const useMainStore = defineStore("main", {
    // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
    // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
    state: () => {
        return {
            info: "pinia 可以使用",
            menus: router.options.routes,
            tabslist: [],
        };
    },
    getters: {},
    actions: {
        addtarbs(key: any) {
            console.log(key, "keykey");
            let routerlist = exportRoutes(router.options.routes);
            if (this.tabslist.some((item: any, index: any) => item.path === key)) {
                //   找到对应的tab
                const index = this.tabslist.findIndex((item: any) => item.path === key);
                //   切换tab
                this.tabslist.forEach((item: any) => {
                    item.meta.isActive = false;
                });
                this.tabslist[index].meta.isActive = true;

                return;
            } else {
                // 如果列表里面没有tab\
                let tab: any = {};
                routerlist.forEach((item: any) => {
                    if (item.path == key) {
                        console.log(item, "item");
                        tab = item;
                    }
                });
                this.tabslist.forEach((item: any) => {
                    item.meta.isActive = false;
                });
                tab.meta.isActive = true;
                console.log(tab, "tab");

                this.tabslist.push(tab);
            }
            console.log(this.tabslist, "改变后this.tabslist");
        },
        // 删除tab
        deep(path: any) {
            //  根据路由path找到数组中的index
            console.log(path);

            const index = this.tabslist.findIndex((item: any) => item.path == path);
            console.log(index);
            // 如果tab是当前激活的，则跳转到上一个路由
            if (this.tabslist[index].meta.isActive) {
                // 如果删除的是当前激活的tab
                // 找到上一个tab
                const prevTab = this.tabslist[index - 1];
                if (prevTab) {
                    // 跳转到上一个tab
                    router.push(prevTab.path);
                    prevTab.meta.isActive = true;
                } else {
                }
            }

            if (index !== -1) {
                this.tabslist.splice(index, 1);
                console.log(this.tabslist, index, "this.tabslist");
            }
            if (this.tabslist.length > 0) {
                this.tabslist[this.tabslist.length - 1].meta.isActive = true;
            }
            // 跳转到上一个路由
        },
    },
});

// 2. 使用容器中的 state
// 3. 通过 getter 修改 state
// 4. 使用容器中的 action 同步和异步请求
